<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="查看文章发布详情信息"
        top="2vh"
        width="1060px"
    >
        <div class="evaluate_tree" style="height: 700px;">
            <el-tree ref="tree"
                     v-loading="loading"
                     :data="dataList"
                     :props="defaultProps"
            >
                <div slot-scope="{ node, data }" class="evaluate_el_tree_div">
                    <div class="evaluate_title">
                        <span> {{ data.userName }} </span>
                        <span style="font-size: 12px;"> ({{ data.createTime }})</span>
                    </div>
                    <div class="evaluate_content">{{ data.evaluateContent }}</div>
                    <div class="evaluate_button">
                        <el-button type="text" @click="supportData(data.id)">点赞（{{ data.supportNum }}）</el-button>
                        <el-button type="text" @click="evaluateData(data.id)">评论（{{ data.evaluateNum }}）</el-button>
                    </div>
                </div>
            </el-tree>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: "evaluateList",
    props: {
        visible: Boolean,
        id: String,
    },
    data() {
        return {
            loading: false,

            dataList: [],
            defaultProps: {
                children: 'childList',
            },
            param: {
                articleId: '',
                field: 'create_time',
                order: 'desc',
            },
        }
    },
    watch: {
        visible(newVal) {
            if (newVal) {
                this.getTreeList();
            }
        }
    },
    methods: {
        getTreeList() {
            this.loading = true;
            this.param.articleId = this.id;
            this.$axios.post("/CHILD_SYSTEM/newsArticleEvaluate/getAllList", this.param).then(res => {
                this.dataList = res.data;
            }).finally(() => {
                this.loading = false;
            })
        },
        supportData(id) {
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/newsArticleEvaluate/support/" + id).then(res => {
                this.getTreeList();
                this.$message.success(res.message);
            }).finally(() => {
                this.loading = false;
            })
        },
        evaluateData (parentsId) {
            this.$prompt('评论信息', '回复评论', {
                confirmButtonText: '保存',
            }).then(({ value }) => {
                this.loading = true;
                var form = new Object();
                form.articleId = this.id;
                form.parentsId = parentsId;
                form.evaluateContent = value;
                this.$axios.post("/CHILD_SYSTEM/newsArticleEvaluate/insert", form).then(res => {
                    this.getTreeList();
                    this.$message.success(res.message);
                }).finally(() => {
                    this.loading = false;
                })
            })
        },
        resetForm() {
            this.$emit('update:visible', false);
            this.$emit('refreshList');
        },
    }
}
</script>

<style lang="scss">

//树页样式
.evaluate_tree {
    overflow: auto;

    .el-tree-node__content {
        height: auto;

        .evaluate_el_tree_div {
            border-top: #cccccc solid 1px;
            padding-top: 10px;
            width: 100%;

            .evaluate_title span {
                font-size: 14px;
                padding-left: 10px;
                line-height: 20px;
                float: left;
            }

            .evaluate_content {
                font-size: 16px;
                padding: 10px;
                width: 100%;
                float: left;
            }

            .evaluate_button {
                float: right;
            }
        }
    }
}

</style>